// 0. 获取元素
var headerBox = document.querySelector('nav')
var goBtn = document.querySelector('.top')


// 1. 绑定滚动事件
window.onscroll = function () {
  // 2. 判断的就是浏览器卷去的高度
  // 获取到浏览器卷去的高度
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop

  // 3. 进行临界点的判断了
    if (scrollTop > 350) {
    // 让两个元素出来
    // 顶部通栏如何出来, 把 top 样式设置为 0
    headerBox.style.top = 0
    // 回到顶部按钮如何数来, 把 display 样式设置为 flex 就行
    goBtn.style.display = 'flex'
    } else {
    // 让两个元素隐藏
    // 顶部通栏如何消失, 把 top 样式设置为 -60px
    headerBox.style.top = '-60px'
    // 回到顶部按钮如何消失, 把 displat 样式设置为 none 就行
    goBtn.style.display = 'none'
    }
}


// 4. 单独给回到顶部按钮绑定点击事件
goBtn.onclick = function () {
  // 让浏览器滚回顶部
    window.scrollTo({
    top: 0,
    behavior: 'smooth'
    })
}
